<template>
  <div>
    <el-dialog :title="title" :closeOnClickModal="false" :visible.sync="show" width="650px" :close-on-press-escape="false">
      <el-form label-position="top" :model="selectTable" ref="addForm" label-width="80px" autocomplete="off" size="medium">

        <el-form-item label="" prop="isDirectory" :rules="[rule[0]]" v-if="selectTable.method === 'add'">
          <el-radio-group v-model="selectTable.isDirectory">
            <el-radio-button :label="0" border>目录</el-radio-button>
            <el-radio-button :label="1" border>源码</el-radio-button>
            <el-radio-button :label="2" border>文件</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col v-if="selectTable.isDirectory===0">
            <el-form-item label="目录名称" prop="resourcesName" :rules="[rule[0]]">
              <el-input v-model="selectTable.resourcesName" placeholder="请输入" maxLength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14" v-if="selectTable.isDirectory===1">
            <el-form-item label="文件名称" prop="resourcesName" :rules="[rule[0],rule[1]]">
              <el-input v-model="selectTable.resourcesName" placeholder="请输入" maxLength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14" v-if="selectTable.isDirectory===2">
            <el-form-item label="上传文件" prop="path" :rules="[rule[0]]">
              <upload v-model="selectTable.path"></upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-if="selectTable.isDirectory===1">
            <el-form-item label="" label-width="0" prop="source" :rules="[rule[0]]">
              <codemirror v-model="selectTable.source" :mode="mode"></codemirror>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-loading="pload">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { resourcesSave, resourcesModify, resourcesGetById } from '@/utils/api'
import upload from './uploadFile'
export default {
  components: {
    upload,
    codemirror: () => import('./codemirror')
  },
  props: {
    data: Object
  },
  created() {
    this.selectTable = this.JSONo({}, this.data)
    if (this.selectTable.method === 'edit') {
      this.getData()
    }
  },
  watch: {
    show(newVal) {
      this.$parent.edit = false
    },
    'selectTable.isDirectory'() {
      this.$refs.addForm.clearValidate()
    }
  },
  computed: {
    title() {
      if (this.selectTable.method === 'edit') {
        return '修改'
      } else if (this.selectTable.method === 'add') {
        return '添加'
      }
    },
    mode() {
      if (/.+\.css$/.test(this.selectTable.resourcesName)) {
        return 'css'
      } else if (/.+\.js$/.test(this.selectTable.resourcesName)) {
        return 'javascript'
      } else {
        return ''
      }
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value.match(/(\.(css|js)((\?|#).*)?$)/i)) {
        callback(new Error('请输入.css|.js文件名'))
      } else {
        callback()
      }
    }
    return {
      pload: false,
      rule: [
        { required: true, message: '必填项', trigger: 'blur' },
        { validator: validatePass, trigger: 'change' }
      ],
      show: true,
      selectTable: {}
    }
  },
  methods: {
    async submitForm(formName) {
      await this.$refs[formName].validate()
      try {
        this.pload = true
        if (this.selectTable.method === 'edit') {
          delete this.selectTable.children
          delete this.selectTable.parent
          await resourcesModify(this.selectTable)
          this.$emit('setData', this.selectTable)
        } else if (this.selectTable.method === 'add') {
          const res = await resourcesSave(this.selectTable)
          this.$emit('setData', res)
        }
        this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
        this.$parent.edit = false
      } catch (e) {
        this.pload = false
      }
    },
    async getData() {
      this.pload = true
      const Datas = await resourcesGetById({
        resourcesId: this.selectTable.resourcesId
      })
      this.selectTable = this.JSONo(this.selectTable, Datas.data)
      this.pload = false
    }
  }
}
</script>